<!DOCTYPE HTML5>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Table</title>
        <!--link rel="stylesheet" type="text/css" href="../css/mrspliter.css"/-->
        <script type="text/javascript" src="../../../mootools/mootools-core-1.4.5.js"></script>
        <!--script type="text/javascript" src="../../../mootools/mootools-more-1.4.0.1.js"></script-->
        <!--script type="text/javascript" src="../../../jquery/jquery.1.7.1.min.js"></script-->
        <!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script-->
        <!--script type="text/javascript" src="../js/mrtreetable.1.7.1.js"></script-->
    </head>
    <script type="text/javascript" charset="utf-8">
        function MrTable(div){
            //Properties
            var that = this;
            var $div = $(div);
            var jsonTable = JSON.decode($div.innerHTML) || {};
            
            //TODO: Don't use $table
            var $table = new Element('div',{'class':'table'}).inject($div, 'before');
            var $head;
            var $body;
            var columnCount = 0;
            
            this.getColumn = function(col){
                return $table.getElements('div.tr').getElements('div.td, div.th').map(function(item){
                    return $(item[col]);
                });
            };
            
            this.getRow = function(row){
                return $body.getElements('div.tr')[row].getElements('div.td');
            }
            
            this.setColumnWidth = function(col, width){
                this.getColumn(col).each(function(c, i){
                    c.setStyle('width', width);
                });
            }
            
            this.setRowHeight = function(row, height){
                this.getRow(row).each(function(r, i){
                    r.setStyle('height', height);
                });
            }
            
            console.log(jsonTable);
            
            //Column types
            
            var columnTypes = jsonTable.columntypes || {};
            
            if(jsonTable.thead){ //Parsing the head
                $head = new Element('div',{'class':'thead'});
                var tr = new Element('div',{'class':'tr'});
                $head.adopt(tr);
                $table.adopt($head);
                jsonTable.thead.each(function(item){
                    var th = new Element('div',{'class':'th'});
                    th.innerHTML = item;
                    tr.adopt(th);
                    columnTypes[item] = columnTypes[item] || "text";
                });
                
                columnCount = jsonTable.thead.length;
            }
            
            console.log(columnTypes);
            
            if(jsonTable.tbody){ //Parsing the body
                $body = new Element('div',{'class':'tbody'});
                $table.adopt($body);
                jsonTable.tbody.each(function(item){
                    var tr = new Element('div',{'class':'tr'});
                    $body.adopt(tr);
                    var height
                    jsonTable.thead.each(function(col){
                        var td = new Element('div',{'class':'td'});
                        td.innerHTML = item[col] || " ";
                        tr.adopt(td);
                    });
                });
            }
            
            tableWidth = 0;
            
            for(i = 0; i < columnCount; i++){
                var col = this.getColumn(i);
                var maxColWidth = 0;
                
                col.each(function(item){
                    var w = item.getSize().x + 1;//This is a hack to prevent word wraping issues on firefox
                    if(maxColWidth < w)
                        maxColWidth = w;
                });
                
                tableWidth += maxColWidth;
                this.setColumnWidth(i, maxColWidth);
            }
            
            $table.setStyle('width', tableWidth-1);
        }
        
        
        window.addEvent('domready', function(){
            $$('div.mrtable').each(function(h){
                ttt = new MrTable(h);
            });
        });
    </script>
    <style>
        .mrbodycontainer{
            overflow:auto;
            display:block;
        }
        
        .mrheadcontainer{
            overflow:hidden;
            display:block;
        }
        
        .mrtablecontainer{
            overflow:hidden;
            display:block;
            padding:-1px;
        }
        
        div.tr{
            position:relative;
            margin-left:-1px;
        }
        
        div.th{
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            display:inline-block;
            vertical-align: top; /*Great*/
        }
        
        div.td{
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            position:relative;
            display:inline-block;
            vertical-align: top; /*Great*/
        }
        
        div.th {
            border-top:none;
            border-right:none;
            border-bottom:none;
            border-left:solid black 2px;
            padding:4px;
        }
        
        div.td{
            border-top:solid black 1px;
            border-right:none;
            border-bottom:none;
            border-left:solid black 1px;
            padding:4px;
        }
        
        div.table{
            /*-moz-box-sizing:border-box;
            box-sizing:border-box;*/
            border-collapse:collapse;
            border:solid black 2px;
            padding:0px;
        }
        
    </style>
    <body>
        <h1>MRUI</h1>
        <h2>mrtable</h2>
        <h3>Example 1</h3>
        <table class="mrtable">
            <thead>
                <tr>
                    <th>Col 1</th>
                    <th>Col 2</th>
                    <th>Col 3</th>
                    <th>Col 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Cell 1.1</td>
                    <td>Cell 1.2</td>
                    <td>Cell 1.3</td>
                    <td>Cell 1.4</td>
                </tr>
            </tbody>
        </table>
        <br/><br/>
        <div class="mrtable">{"thead":["Col 1","Col 2","Col 3","Col 4"],"tbody":[{"Col 1":"Cell 1.1","Col 2":"Cell 1.2","Col 3":"Cell 1.3","Col 4":"Cell 1.4"}]}</div>
        <br/>
        <div class="mrtable"></div>
        <br/>
        <div class="mrtable">{"thead":["Col 1","Col 2","Col 3","Col 4"],"tbody":[{"Col 1":"Cell 1.1","Col 2":"Cell 1.2","Col 4":"Cell 1.4"},{"Col 1":"Cell 2.1","Col 2":"Cell 2.2 large","Col 3":"Cell 2.3","Col 4":" "}]}</div>
    </body>
</html>
